﻿@model BBICMS.WebUI.ViewModels.PhotoViewModels

@{
    ViewBag.Title = "上传产品照片";
    ViewBag.PageTitle = ViewBag.Title + "_产品管理";
    Layout = "~/Areas/bbi_Admin/Views/Shared/_LayoutAdmin.cshtml";
}

@section header{
    <!-- this page specific styles -->
    <link rel="stylesheet" href="@Url.Content("~/Content/Admin/css/compiled/gallery.css")" type="text/css" media="screen" />
    <script src="~/plugins/ckfinder/ckfinder.js"></script>
    <style>
        #success-msg-container,
        #fail-msg-container, #progress-bar, #delete-msg-container {
            display: none;
        }
    </style>
}

@section footer{
    <script type="text/javascript" src="@Url.Content("~/Scripts/app/photosDataService.js")"></script>
    <script type="text/javascript">
        function BrowseServer() {
            // You can use the "CKFinder" class to render CKFinder in a page:
            var finder = new CKFinder();
            finder.basePath = '/plugins/ckfinder/';
            finder.selectActionFunction = SetFileField;
            finder.SelectFunction = 'ShowFileInfo';
            finder.popup();
        }



        function SetFileField(fileUrl) {
            $('#xFilePath').val(fileUrl);
        }




        $(function () {

            var progressBar = $('#progress-bar');

            var SinglePhoto = function () {
                this.photoId = ko.observable("@Model.Photo.PhotoId");
                this.productId = ko.observable("@Model.Photo.ProductId");
                this.title = ko.observable("@Model.Photo.Title");
                this.importance = ko.observable("@Model.Photo.Importance");
                this.imageUrl = ko.observable("@Model.Photo.ImageUrl");

            };

            var ViewModel = function (photo) {
                this.model = photo;
                this.photos = ko.observableArray(@Html.Raw(Model.PhotosJSON));


                this.currentPhoto = {};
                this.errorMessage = ko.observable();


                this.requestDelConfirm = function (photo) {
                    vm.currentPhoto = photo;
                    $('#del-confirm').modal();
                };

                this.del = function () {
                    var photo = ko.toJS(vm.currentPhoto);

                    debugger;

                    photosDataService.del(photo).done(function (response) {
                        vm.photos.remove(function (item) {
                            return item.photoId === photo.photoId;
                        });
                    }).fail(function (error) {
                        vm.showError(error);
                    }).always(function () {
                        $('#del-confirm').modal('hide');
                    });
                };





                this.hideProgressBar = function (showAfterHideFunc) {
                    progressBar.fadeOut(function () {
                        showAfterHideFunc();
                    });
                };

                this.showError = function (error) {
                    var resetUI = function () {
                        $('#command-buttons').fadeIn();
                        $('#fail-msg-container').fadeIn();
                    };

                    vm.hideProgressBar(resetUI);

                    if (error.statusText) {
                        vm.errorMessage(error.statusText);
                    }

                    if (error.responseText) {
                        var
                            msg = JSON.parse(error.responseText),
                            keys = _.keys(msg),
                            txt = '';

                        _.each(keys, function (key) {
                            txt += msg[key] + ' ';
                        });
                        vm.errorMessage(txt);
                    }
                };

                this.showSuccess = function () {
                    var resetUI = function () {
                        $('#command-buttons').fadeIn();
                        $('#fail-msg-container').fadeOut();
                        $('#delete-msg-container').fadeOut();
                        $('#success-msg-container').fadeIn();
                    };

                    vm.hideProgressBar(resetUI);

                    // $("#upload-form")[0].reset();

                    var fadeOut = function () {
                        $('#success-msg-container').fadeOut()
                    };

                    _.delay(fadeOut, 5000);
                };

                this.save = function () {

                    var validationUtility = new ValidationUtility();

                    if (validationUtility.validate('photo-data-form')) {
                        $('#command-buttons').hide();
                        $('#progress-bar').fadeIn();

                        this.model.imageUrl($('#xFilePath').val());
                        var vPhoto = ko.toJS(this.model);

                        debugger;
                        photosDataService.save(vPhoto).done(function (response) {
                            if (response.photoId) {
                                vm.model.photoId(response.photoId);
                            }
                            vm.photos.push(vPhoto);

                            vm.showSuccess();

                        }).fail(function (error) {
                            vm.showError(error);
                        });
                    }
                };
            };

            var vm = new ViewModel(new SinglePhoto());
            ko.applyBindings(vm);

            //当前菜单          
            $('.mainmenu>li').eq(1).addClass('nav-open').find('.submenu li').eq(0).children('a').addClass('active');
        })
    </script>
}



<div class="toolbar">
    <a href="#" class="showmenu"><i class="fa fa-bars"></i></a>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index","Home")"><i class="glyphicon glyphicon-home"></i> 控制面板</a></li>
        <li><a href="#">资讯管理</a></li>
        <li class="active">@ViewBag.Title</li>
    </ol>
</div>
<div class="main-content">

    <div class="box">
        <header class="box-header">
            <h3><i class="glyphicon glyphicon-file"></i> @ViewBag.Title</h3>
            <div class="control">
                <a href="#" class="expand"><i class="fa fa-expand"></i></a>
                <a href="#" class="compress"><i class="fa fa-compress"></i></a>
            </div>
        </header>

        <section class="box-body">
            

            <div id="delete-msg-container"
                 class="alert alert-info fade in">
                <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                <h4>图片已经被删除</h4>
                <p>
                    此图片已经从系统中删除，
                    您可以
                    @Html.ActionLink("返回产品列清", "Index", "Product")。
                </p>
            </div>

            <!-- gallery wrapper -->
            <div class="gallery-wrapper">
                <div class="row gallery-row" data-bind="template:{name:'list-template',foreach:photos}"></div>
                <script type="text/html" id="list-template">
                    <!-- single image -->
                    <div class="col-md-3 img-container">
                        <div class="img-box">
                            <span class="icon" data-bind="click: $parent.requestDelConfirm">
                                <i class="fa fa-trash-o fa-2x"></i>
                            </span>
                            <img data-bind="attr: {src: imageUrl}" class="img-responsive" alt="picture" />
                            <p class="title" data-bind="text:title"></p>
                        </div>
                    </div>
                </script>


            </div>
            <!-- end gallery wrapper -->
            <!-- blank state -->
            <div class="no-gallery">
                <div class="row header">
                    <div class="col-md-12">
                        <h3>上传图片</h3>
                    </div>
                </div>
                <form class="form-horizontal" id="photo-data-form" role="form">
                    <div class="form-group">
                        <label for="inputTitle" class="col-sm-2 control-label">主题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputTitle" data-bind="value:model.title" placeholder="主题" autofocus
                                   data-role="validate" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputImportance" class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputImportance" data-bind="value:model.importance" placeholder="排序" autofocus
                                   data-role="validate" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="xFilePath" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="xFilePath" name="FilePath" type="text" data-bind="value:model.imageUrl" autofocus
                                       data-role="validate" class="form-control" required />
                                <span class="input-group-btn">
                                    <button class="btn btn-default" onclick="BrowseServer();" type="button">浏览…</button>
                                </span>
                            </div><!-- /input-group -->
                        </div>
                    </div>
                    <div id="progress-bar"
                         class="progress progress-striped active">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only">100% Complete</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10" id="command-buttons">
                            <button type="button" data-bind="click: save" class="btn btn-primary">保存</button>
                            @Html.ActionLink("返回", "Index", "Product", null, new { @class = "btn btn-default" })
                        </div>


                    </div>
                </form>
                <div class="row-fluid">
                    <div class="col-sm-offset-2 col-sm-10 ">
                        <div id="fail-msg-container"
                             class="alert alert-danger fade in">
                            <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                            <h4>错误</h4>
                            <p>
                                Oops, something bad happened!
                                This is what the server has to say about it:
                            </p>
                            <p data-bind="text: errorMessage"></p>
                        </div>

                        <div id="success-msg-container"
                             class="alert alert-success fade in">

                            <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

                            <h4>保存图片</h4>
                            <p>
                                此产品图片信息已经被保存。
                            </p>
                        </div>
                    </div>



                </div>

            </div>
            <!-- end blank state -->

        </section>
        <footer class="box-footer">
          
        </footer>

       
    </div>
</div>



<div id="del-confirm" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="del-confirm-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                    ×
                </button>
                <h3 id="del-confirm-label">Confirm Delete</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this product?</p>
                <p class="alert alert-error push-down">
                    <strong>Note:</strong>
                    There is no undo for this action.
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary" data-bind="click: del">Delete Product</button>
            </div>
        </div>
    </div>
</div>
